<template>
	<div class="books1">
		<div class="div1">
			<aside>
				<i class="el-icon-s-data"><span>商品一级类型</span></i>
				<button><router-link to="/admin/booklist1"><i class="el-icon-refresh-right"></i></router-link></button>
			</aside>
			<hr />
			<button type="text" @click="go2add()">添加一级类型</button>
		</div>
		<div class="div2">
			<el-table :data="fun" size="medium" border style="width: 98%; margin-top: 20px">
				<el-table-column prop="id" label="一级类型ID" min-width="60">
				</el-table-column>
				<el-table-column prop="prio" label="顺序" min-width="60">
				</el-table-column>
				<el-table-column prop="name" label="一级类型名称" min-width="80">
				</el-table-column>
				<el-table-column label="二级信息节点" min-width="300">
					<template slot-scope="scope">
						<div class="box">
							<div class="box-name" v-for="item in scope.row.list">{{item.name}}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" @click="go2update(scope.row.id)" plain>
							<i class="el-icon-edit"> 修改</i>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="类型信息" :visible.sync="centerDialogVisible" width="30%" center>
			<el-form ref="user" :model="user" label-width="100px">
				<el-form-item label="一级ID">
					<el-input v-model="user.id" readonly></el-input>
				</el-form-item>
				<el-form-item label="一级类型名称">
					<el-input v-model="user.name"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序">
					<el-input v-model="user.prio"></el-input>
				</el-form-item>
				<el-button @click="add()">{{act}}</el-button>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'Booklist1',
		data() {
			return {
				act: '',
				centerDialogVisible: false,
				type: [],
				value: [],
				childen: [],
				user: {}
			}
		},
		methods: {
			go2add() {
				this.act = '添加'
				this.user = {
					id: 0,
					name: '',
					pid: 0,
					prio: 100
				};
				this.centerDialogVisible = true;
			},
			add() {
				this.centerDialogVisible = false;
				this.value = [];
				this.$postkv("/api/adm/type/add", this.user).then((resp) => {
					this.value = resp.data.data;
					console.log(this.user);

					this.$message({
						message: resp.data.msg,
						type: 'success'
					})

				})
			},
			go2update(id) {
				this.act = '修改';
				this.centerDialogVisible = true;
				this.$get("/api/adm/type/findById/" + id).then((resp) => {
					this.user = resp.data.data;
					console.log(this.user);
				})
			}
		},
		mounted() {
			this.$get("/api/adm/type/findAll2").then((resp) => {
				this.type = resp.data.data;
				console.log(this.type);
			})
		},
		computed: {
			fun() {
				this.type.forEach((item) => {
					if (item.pid == 0) { // this.type这个数据的对象等于类型编号0的时候把匹配的对象赋值给新数组value接收
						this.value.push({
							id: item.id,
							name: item.name,
							prio: item.prio
						})
					}
				})
				console.log(this.value);
				this.value.forEach((i) => {
					let types2 = [];
					this.type.forEach((item) => {
						if (item.pid == i.id && item.pid > 0) {
							types2.push({
								id: item.id,
								name: item.name,
								prio: item.prio
							})
						}
					})
					i.list = types2;
				})
				return this.value;
			}
		}
	}
</script>

<style scoped>
	a {
		color: white;
	}

	.books1 {
		width: 78%;
		margin: 0 auto;
	}

	.books1 .div1 {
		margin-top: 15px;
	}

	.books1 .div1 aside {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.books1 .div1 aside span {
		margin-left: 8px;
	}

	.books1 .div1 aside button {
		width: 80px;
		line-height: 40px;
		border: none;
		color: white;
		background-color: #009688;
		margin-right: 2vw;
		font-size: 18px;
	}

	.books1 .div1 button {
		width: 150px;
		line-height: 40px;
		border: none;
		color: white;
		background-color: #009688;
	}

	.books1 .div2 {
		margin-top: 20px;
		padding-bottom: 20px;
	}
	.div2 .box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.div2 .box-name{
		height: 27px;
		min-width: 100px;
		width: 32%;
		margin-left: 5px;
		border-bottom: 1px solid lightgrey;
		overflow: hidden;
		margin-top: 10px;
	}
</style>